import { useState } from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { Space, Tabs, Image, Price, Tag, Ellipsis, Button } from '@nutui/nutui-react-taro'
import './index.scss'

import { listData } from './data'

const imgDomain = 'http://oss.beta.366ec.net'

function TabList() {
	const [tab1value, setTab1value] = useState<string | number>('0')
	const toDetail = (orderNum: string) => {
		Taro.navigateTo({
			url: `/pages/OrderDetail/index?orderNum=${orderNum}`,
		})
	}
	return (
		<View className="tab-list">
			<Tabs
				value={tab1value}
				onChange={(value) => {
					setTab1value(value)
				}}
				tabStyle={{ position: 'sticky', top: '0px', zIndex: 11 }}
				activeType="smile"
				autoHeight
			>
				<Tabs.TabPane title="Tab 1">
					{listData.map((item: any, index) => {
						return (
							<View key={index} className="item-content">
								<View onClick={() => toDetail(item.OddNumber)}>
									<Space>
										<View>订单编号：{item.OddNumber}</View>
									</Space>
									<View className="product-items">
										{item?.Children?.length > 0 &&
											item.Children.map((c_item: any, c_index: number) => {
												return (
													<View key={`${index}_${c_index}`} className="product-items-one box">
														<Image width="80" height="80" src={imgDomain + c_item.DefaultPic} mode='widthFix' />
														<View className="flex1 ml_1">
															<Ellipsis content={c_item.ProductName} direction="end" />
															<View className="box box-between mt_1">
																<Price price={c_item.AuxPrice} size="normal" thousands />
																<View className="color-gary ft-sm">
																	x{c_item.AuxQty}
																	{c_item.AuxUnit}
																</View>
															</View>
														</View>
													</View>
												)
											})}
									</View>
									<View className="box box-between">
										<Space justify="start">
											<Tag background="#FA685D">{item.OrderType}</Tag>
											<Text className="color-gary ft-sm">{item.AddTime}</Text>
										</Space>
										<View className="color-gary ft-sm">{item.PayName}</View>
									</View>
									<View className="box box-between mt_1">
										<Text className="ft-sm">
											种类：{item?.Children?.length ?? 0} 数量：{item.ProductNum}
										</Text>
										<Price price={item.Payables} size="normal" thousands />
									</View>
								</View>
								<View className="tr mt_1">
									<Button type="info" fill="outline" shape="square">
										立即评价
									</Button>
									<Button type="success" fill="outline" shape="square" className="ml_1">
										申请售后
									</Button>
									<Button type="danger" fill="outline" shape="square" className="ml_1">
										再次购买
									</Button>
								</View>
							</View>
						)
					})}
				</Tabs.TabPane>
				<Tabs.TabPane title="Tab 2">
					<p>Tab 2</p>
					<p>Tab 2</p>
					<p>Tab 2</p>
					<p>Tab 2</p>
					<p>Tab 2</p>
					<p>Tab 2</p>
					<p>Tab 2</p>
					<p>Tab 2</p>
				</Tabs.TabPane>
				<Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
			</Tabs>
		</View>
	)
}

export default TabList
